<template>
  <div>
    <el-card
      class="box-card"
      style="marginleft: 6px; paddingbottom: 10px; position: relative"
    >
      <div slot="header" class="clearfix" style="height: 30px">
        <div class="headerLeft">
          <el-radio-group
            size="mini"
            v-model="tabPosition"
            style="margin-bottom: 30px;"
          >
            <el-radio-button :label="-20">退回</el-radio-button>
            <!-- <el-badge :value="TabLength" class="item"> -->
            <el-radio-button :label="10">待审批</el-radio-button>
            <!-- </el-badge> -->
            <el-radio-button :label="-10">拒绝</el-radio-button>
            <el-radio-button :label="20">通过</el-radio-button>
          </el-radio-group>
        </div>
        <div class="headerRight">
          <el-form :model="typeForm" label-width="80px" size="mini">
            <el-form-item label="申报类型" style="margintop: -10px">
              <el-select
                v-model="typeForm.searchType"
                placeholder="请选择申报类型"
                size="mini"
              >
                <el-option
                  v-for="item in searchOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                size="mini"
                type="primary"
                class="SearchButton"
                @click="searchType"
                >搜索</el-button
              >
              <el-button
                size="mini"
                type="primary"
                class="SearchButton"
                @click="resetType"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div>
        <div v-if="reFresh">
          <el-card class="box-card">
            <div class="allDiv">
              <div>学号</div>
              <div>标题</div>
              <div>状态</div>
              <div>类型</div>
              <div>操作</div>
            </div>
          </el-card>
          <el-card class="box-card" v-for="o in tableData" :key="o">
            <div class="allDiv">
              <div>{{ o.applyUsername }}</div>
              <div>{{ o.title }}</div>
              <div>{{ o.statusDec }}</div>
              <div>{{ o.typeDec }}</div>
              <div>
                <el-button
                  type="primary"
                  size="mini"
                  @click="viewProcess(o.id, o.type)"
                  icon="el-icon-d-arrow-right"
                  >查看审批流程</el-button
                >
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <div>
        <el-pagination
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="page.total"
          :page-size="5"
          align="right"
          small="true"
          background
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- <basic-container> -->
    <el-drawer
      :destroy-on-close="true"
      size="40%"
      title="审批过程"
      :visible.sync="drawer"
      :direction="rtl"
      :before-close="handleClose"
      append-to-body="true"
    >
      <moralEducationDrawer
        v-if="type === 10"
        :reviewId="reviewId"
        :isApprovue="false"
        :type="type"
        @close="close"
        :studentEdit="false"
      ></moralEducationDrawer>

      <jobDrawer
        v-if="type === 20"
        :reviewId="reviewId"
        :isApprovue="false"
        :type="type"
        @close="close"
        :studentEdit="false"
      ></jobDrawer>
      <goodThingsDrawer
        v-if="type === 30"
        :reviewId="reviewId"
        :isApprovue="false"
        :type="type"
        @close="close"
        :studentEdit="false"
      ></goodThingsDrawer>
      <publicWelfareDrawer
        v-if="type === 40"
        :reviewId="reviewId"
        :isApprovue="false"
        :type="type"
        @close="close"
        :studentEdit="false"
      ></publicWelfareDrawer>
      <certificateDrawer
        v-if="type === 50"
        :reviewId="reviewId"
        :isApprovue="false"
        :type="type"
        @close="close"
        :studentEdit="false"
      ></certificateDrawer>
      <innovativeDrawer
        v-if="type === 60"
        :reviewId="reviewId"
        :isApprovue="false"
        :type="type"
        @close="close"
        :studentEdit="false"
      ></innovativeDrawer>
      <courseDrawer
        v-if="type === 70"
        :reviewId="reviewId"
        :isApprovue="false"
        :type="type"
        @close="close"
        :studentEdit="false"
      ></courseDrawer>
      <culturalDrawer
        v-if="type === 80"
        :reviewId="reviewId"
        :isApprovue="false"
        :type="type"
        @close="close"
        :studentEdit="false"
      ></culturalDrawer>
      <culturalTransmissDrawer
        v-if="type === 90"
        :reviewId="reviewId"
        :isApprovue="false"
        :type="type"
        @close="close"
        :studentEdit="false"
      ></culturalTransmissDrawer>
    </el-drawer>
    <!-- </basic-container> -->
  </div>
</template>
<script>
import { getMyList } from "@/api/studentsPage/approval";
import { baseUrl } from "@/config/env";
import { getStore } from "@/util/store";
import moralEducationDrawer from "@/components/reviewDrawer/moralEducationDrawer.vue";
import goodThingsDrawer from "@/components/reviewDrawer/goodThingsDrawer.vue";
import jobDrawer from "@/components/reviewDrawer/jobDrawer.vue";
import publicWelfareDrawer from "@/components/reviewDrawer/publicWelfareDrawer.vue";
import certificateDrawer from "@/components/reviewDrawer/certificateDrawer";
import innovativeDrawer from "@/components/reviewDrawer/innovativeDrawer";
import courseDrawer from "@/components/reviewDrawer/courseDrawer";
import culturalDrawer from "../../components/reviewDrawer/culturalDrawer";
import culturalTransmissDrawer from "@/components/reviewDrawer/culturalTransmissDrawer";

export default {
  components: {
    moralEducationDrawer,
    goodThingsDrawer,
    jobDrawer,
    publicWelfareDrawer,
    certificateDrawer,
    innovativeDrawer,
    courseDrawer,
    culturalDrawer,
    culturalTransmissDrawer,
  },
  name: "",
  data() {
    return {
      // tab切换
      tabPosition: "10",
      reviewId: "",
      // 重置生命周期
      reFresh: true,
      // 搜索框
      typeForm: {
        searchType: "",
      },
      drawer: false,
      dialogPermissionVisible: false,
      actionurl: baseUrl + "/basic/sys-file-log/uploadFile",
      type: "",
      active: "",
      page: {
        pageSize: 10,
        total: 10,
      },
      headers: {
        Authorization: "",
      },
      searchForm: {
        currentPage: 1,
        pageSize: 5,
        status: 10,
        type: "",
      },
      searchOption: [
        { label: "德育素质", value: 10 },
        {
          label: "学生干部任职",
          value: 20,
        },
        {
          label: "好人好事",
          value: 30,
        },
        {
          label: "公益活动",
          value: 40,
        },
        {
          label: "证书申请",
          value: 50,
        },
        {
          label: "创新创业认定",
          value: 60,
        },
        {
          label: "学科竞赛",
          value: 70,
        },
        {
          label: "文艺活动",
          value: 80,
        },
        {
          label: "文化传播",
          value: 90,
        },
      ],
      tableData: [],
    };
  },
  created() {
    this.searchHandler();
    this.headers.Authorization = getStore({
      name: "token",
    });
    this.reFresh = false;
    this.$nextTick(() => {
      this.reFresh = true;
    });
  },
  watch: {
    // tab切换
    tabPosition() {
      this.tabChange();
    },
    // 重置生命周期
    tableData() {
      this.reFresh = false;
      this.$nextTick(() => {
        this.reFresh = true;
      });
      this.tableData.forEach((ele) => {
        if (ele) {
          switch (ele.type) {
            case 10:
              ele.typeDec = "德育素质";
              break;
            case 20:
              ele.typeDec = "学生干部任职";
              break;
            case 30:
              ele.typeDec = "好人好事";
              break;
            case 40:
              ele.typeDec = "公益活动";
              break;
            case 50:
              ele.typeDec = "证书申请";
              break;
            case 60:
              ele.typeDec = "创新创业认定";
              break;
            case 70:
              ele.typeDec = "学科竞赛";
              break;
            case 80:
              ele.typeDec = "文艺活动";
              break;
            case 90:
              ele.typeDec = "文化传播";
              break;
          }
          switch (ele.status) {
            case 10:
              ele.statusDec = "待审批";
              break;
            case -10:
              ele.statusDec = "拒绝";
              break;
            case 20:
              ele.statusDec = "通过";
              break;
            case -20:
              ele.statusDec = "退回";
              break;
          }
        }
      });
    },
  },

  methods: {
    handleCurrentChange(val) {
      this.searchForm.currentPage = val;
      this.searchHandler();
    },
    tabChange() {
      this.searchForm.status = this.tabPosition;
      this.searchForm.currentPage = 1;
      this.searchHandler();
    },
    // 搜索
    searchType() {
      this.searchForm.type = this.typeForm.searchType;
      this.searchHandler();
    },
    // 重置
    resetType() {
      this.typeForm.searchType = "";
      this.searchForm.type = "";
      this.searchHandler();
    },
    searchHandler() {
      getMyList(this.searchForm).then((res) => {
        this.page.pageSizes = res.data.pageSizes;
        this.page.total = res.data.total;
        this.tableData = res.data.records;
        // 存在浏览器内存，搜索使用
      });
    },
    viewProcess(id, type) {
      console.log("row", type);
      // this.drawer = true;
      // this.drawerOpen(row);
      this.reviewId = id;
      this.type = type;
      this.drawer = true;
    },
    initiate() {
      this.dialogPermissionVisible = true;
    },
    // 详情抽屉关闭
    handleClose(done) {
      done();
    },
  },
};
</script>

<style lang="less">
.headerLeft {
  position: absolute;
  left: 3%;
}
.headerRight {
  position: absolute;
  right: 15%;
}
.SearchButton {
  position: relative;
  top: -48px;
  right: -110%;
}

.drawerValue {
  text-indent: 2em;
  font-size: 13px;
  font-weight: 200;
}
.allDiv div {
  width: 20%;
  float: left;
  text-align: center;
  margin-bottom: 20px;
}
.box-card {
  width: 95%;
  margin: 10px auto;
  padding: 5px;
}
.item {
  z-index: 3000;
}
.el-badge__content {
  right: 28px !important;
}
.el-badge__content_dis {
  opacity: 0 !important;
}
.el-pagination {
  margin-bottom: 23px;
}
</style>
